<template>
	<view class="yp">
		<view class="inputBox">
			<text class="cuIcon-addressbook"></text>
			<input placeholder="搜点赞/评论/收藏/通知" />
		</view>
		<scroll-view scroll-x class="tag-nav nav text-center">
			<view class="cu-item" :class="0 == TabCur ? 'text-blue cur' : ''" @tap="tabSelect" data-id="0">互动</view>
			<view class="cu-item" :class="1 == TabCur ? 'text-blue cur' : ''" @tap="tabSelect" data-id="1">动态</view>
			<view class="cu-item" :class="2 == TabCur ? 'text-blue cur' : ''" @tap="tabSelect" data-id="2">通知</view>
		</scroll-view>
		<swiper class="contnet-swiper " ref="contnetSwiper" :current="TabCur" @change="swiperChange" easing-function="easeInOutCubic"
		 duration='300'>
			<!-- 下拉刷新 -->
			<swiper-item class="contnet-swiper-item">
				<scroll-view scroll-y class="contnet-swiper-item" refresher-enabled='true' :refresher-triggered='IsPullLoading'
				 @scrolltolower='scrollBottom' @refresherrefresh='refresherrefresh' @refresherrestore="onRestore">

					<template v-if="listItemList.length>0">
						<Content v-for='i in listItemList' :item='i'></Content>
					</template>
					<template v-else>
						<view class="no-reccord">
							<image class="img" src="../../../static/img/community/no_data.png"></image>
							<text>暂无通知</text>
						</view>
					</template>

				</scroll-view>
			</swiper-item>
			<swiper-item class="contnet-swiper-item">
				<scroll-view scroll-y class="contnet-swiper-item">
					<view class="no-reccord">
						<image class="img" src="../../../static/img/community/no_data.png"></image>
						<text>暂无通知</text>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="contnet-swiper-item">
				<scroll-view scroll-y class="contnet-swiper-item">
					<view class="no-reccord">
						<image class="img" src="../../../static/img/community/no_data.png"></image>
						<text>暂无通知</text>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>

		<!-- 拟态框弹窗 -->
		<YModal :YModalShow.sync='YModalShow' title='提示' content='是否删除该条记录？' @SubmitOk='YModal_SubmitOk'></YModal>
	</view>
</template>

<script>
	import YModal from '@/common/components/Y-showModel/index.vue'
	import Content from './component/content.vue'
	import {
		API$SelNotice,
		API$DelNotice
	} from '@/common/API/notice.js'
	export default {
		name: "",
		components: {
			Content,
			YModal
		},
		data() {
			return {
				TabCur: 0, // tag 栏目下标
				YModalShow: false, //拟态框
				SelToDelData: "", // 长按选中要被删除的数据
				listItemList: [], // 数据列表
				noticeTotal: 0, // 通知总数
				SelJson: {
					pageNum: 0,
					pageSize: 10,
					noticeType: 1
				},
				IsPullLoading: true // 是否处于下拉刷新状态
			}
		},
		created() {
			this.GetNoticeList(this.SelJson)
		},
		onLoad() {
			uni.$on('change', (res) => {
				let {
					type,
					Booleans,
					data
				} = res
				switch (type) {
					case 'change_IsRead':
						this.listItemList.forEach(i => {
							if (i._id === data._id) {
								if (i.IsRead) return
								this.$set(i, 'IsRead', true)
								this.$pub.Toast('您已阅读')
							}
						})
						break;
					case 'change_YModal':
						this.YModalShow = Booleans
						this.SelToDelData = data
						break;
				}
			})
		},
		methods: {
			// swiper bar点击改变
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
			},
			// swiper滑动改变
			swiperChange(e) {
				this.TabCur = e.detail.current;
			},
			// 弹窗成功回调
			YModal_SubmitOk(e) {

				// 删除通知信息
				for (let i = 0; i < this.listItemList.length; i++) {
					if (this.listItemList[i]._id === this.SelToDelData._id) {
						this.listItemList.splice(i, 1)
						this.DelNotice({
							_id: this.SelToDelData._id
						})
					}
				}
			},
			// 触底加载
			scrollBottom(e) {
				if ((this.SelJson.pageNum + 1) * this.SelJson.pageSize > this.noticeTotal) {
					return
				}
				this.SelJson.pageNum = this.SelJson.pageNum + 1
				this.GetNoticeList(this.SelJson)
				console.log('chudile')
			},
			// 下拉刷新被触发
			refresherrefresh() {
				this.SelJson.pageNum = 0
				this.GetNoticeList(this.SelJson,'reset')
			},
			// 下拉刷新重置
			onRestore() {
				this.IsPullLoading = 'restore'; // 需要重置
				console.log("onRestore");
			},
			/*********************************************数据接口部分******************************************************************/
			// 查询通知列表
			async GetNoticeList(SelJson,type) {
				let {
					code,
					msg,
					data,
					total
				} = await API$SelNotice(SelJson)
				console.log(code, msg, data)
				if (code === 200) {
					// this.listItemList = this.listItemList.concat(data)
					this.listItemList = type==='reset'? data : this.listItemList.concat(data)
					this.noticeTotal = total
				}
				this.$pub.Toast(msg)
				this.IsPullLoading = false
			},
			// 删除通知信息
			async DelNotice(SelJson) {
				let {
					code,
					msg,
					data
				} = await API$DelNotice(SelJson)
				console.log(code, msg, data)
				if (code === 200) {
					this.$pub.Toast(msg)
				}

			}
		}
	}
</script>

<style scoped lang="less">
	.yp {
		width: 100%;
		height: 100vh;
	}

	.inputBox {
		background-color: #f6f6f6;
		border-radius: 50rpx;
		width: 90%;
		margin: 20rpx auto 0 auto;
		display: flex;
		align-items: center;

		text[class^='cuIcon-'] {
			font-size: 50rpx;
			padding: 20rpx;
		}

		.int {
			width: inherit;
		}
	}

	.tag-nav {
		width: 100%;
		background-color: #fff;
		position: sticky;
		top: 0;
		z-index: 99;
	}

	.cu-item {
		padding: 0 80rpx;
	}

	.contnet-swiper {
		z-index: 98;
		width: 100%;
		/* #ifdef H5 */
		height: calc(100vh - 44px - 100rpx);
		/* #endif*/
		/* #ifdef APP-PLUS */
		height: calc(100vh - 100rpx);
		/* #endif*/
	}

	.contnet-swiper-item {
		z-index: 98;
		width: 100%;
		height: 100%;
	}


	// 没有记录
	.no-reccord {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate3d(-50%, -50%, 0);
		width: 100%;

		image {
			height: 200rpx;
			width: 200rpx;
		}
	}
</style>
